import React from "react";
import { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useLocation } from "react-router-dom";
import { Toast, NavBar } from "@nutui/nutui-react";
import { Share, ArrowLeft } from "@nutui/icons-react";
import { Input, Switch, Radio, Space, Button } from "antd-mobile";
export default function () {
  const navigate = useNavigate();
  const localtion = useLocation();
  const [data, setData] = useState({});

  useEffect(() => {
    axios
      .get("http://localhost:3000/xm/gai?_id=" + localtion.search.split("=")[1])
      .then((res) => {
        setData({ ...res.data.info });
      });
  }, []);
  console.log(data);

  return (
    <div>
      <NavBar
        back={
          <>
            <ArrowLeft />
            返回
          </>
        }
        right={
          <span className="flex-center" onClick={(e) => Toast.show("icon")}>
            <Share />
          </span>
        }
        onBackClick={() => navigate("/guan")}
      >
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        修改信息
      </NavBar>
      <div
        style={{
          width: "100%",
          height: "500px",
          border: "1px solid",
          borderRadius: "20px",
          boxSizing: "border-box",
          // display: "flex",
          // flexWrap: "wrap",
          paddingLeft: "40px",
          paddingTop: "20px",
        }}
      >
        <p>
          姓名：
          <br />
          <br />
          <Input
            placeholder="请输入姓名"
            value={data.name}
            onChange={(e) => {
              let copydata = { ...data };
              copydata.name = e;
              setData(copydata);
            }}
            style={{
              backgroundColor: "#dde3e9",
              borderRadius: "20px",
              paddingLeft: "20px",
              width: "300px",
            }}
          />
        </p>
        <p>
          职位： <br />
          <br />
          <Radio.Group
            value={data.zhiwei}
            onChange={(e) => {
              let copydata = { ...data };
              copydata.zhiwei = e;
              setData(copydata);
            }}
          >
            <Space direction="vertical">
              <Radio value="院长">院长</Radio>
              <Radio value="主任">主任</Radio>
              <Radio value="不知道">不知道</Radio>
            </Space>
          </Radio.Group>
        </p>
        <p>
          技能： <br />
          <br />
          <Input
            placeholder="请输入技能"
            value={data.jineng}
            style={{ marginLeft: "20px" }}
            onChange={(e) => {
              let copydata = { ...data };
              copydata.jineng = e;
              setData(copydata);
            }}
          />
        </p>
        <p>
          单位： <br />
          <br />
          <Input
            placeholder="请输入单位"
            value={data.danwei}
            style={{ marginLeft: "20px" }}
            onChange={(e) => {
              let copydata = { ...data };
              copydata.danwei = e;
              setData(copydata);
            }}
          />
        </p>

        <p>
          是否认证： <br />
          <br />
          <Switch
            checked={data.isRenzheng}
            onChange={(e) => {
              let copydata = { ...data };
              copydata.isRenzheng = e;
              setData(copydata);
            }}
          />
        </p>
      </div>
      <Button
        block
        color="primary"
        size="large"
        style={{ marginTop: "20px", borderRadius: "10px" }}
        onClick={() => {
          axios.post("http://localhost:3000/xm/gaii", data).then(res=>{
            if(res.data.code === 200){
              alert('修改成功')
              navigate('/guan')
            }
          })
        }}
      >
        修改
      </Button>
    </div>
  );
}
